<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import { useTokenStore } from '@/store/token'
import { useUserStore } from '@/store/user'
import { tabbarList } from '@/tabbar/config'
import { isPageTabbar } from '@/tabbar/store'
import { ensureDecodeURIComponent } from '@/utils'
import { parseUrlToObj } from '@/utils/index'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '蛐蛐本 - 登录',
    navigationBarBackgroundColor: '#f0f9e8',
    navigationBarTextStyle: 'black',
  },
})

const redirectUrl = ref('')
const loading = ref(false)

// 表单数据
const formData = reactive({
  username: 'admin',
  password: '123456',
})

// 表单验证规则
function validateForm() {
  if (!formData.username.trim()) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'none',
    })
    return false
  }
  if (!formData.password.trim()) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none',
    })
    return false
  }
  if (formData.password.length < 6) {
    uni.showToast({
      title: '密码至少6位',
      icon: 'none',
    })
    return false
  }
  return true
}

onLoad((options) => {
  if (options.redirect) {
    redirectUrl.value = ensureDecodeURIComponent(options.redirect)
  }
  else {
    redirectUrl.value = tabbarList[0].pagePath
  }
})

const userStore = useUserStore()
const tokenStore = useTokenStore()

// 登录处理
async function doLogin() {
  if (!validateForm())
    return

  if (tokenStore.hasLogin) {
    uni.navigateBack()
    return
  }

  loading.value = true

  try {
    // 调用登录接口
    await tokenStore.login({
      username: formData.username,
      password: formData.password,
    })

    // 登录成功，跳转页面
    let path = redirectUrl.value
    if (!path.startsWith('/')) {
      path = `/${path}`
    }
    const { path: _path, query } = parseUrlToObj(path)

    if (isPageTabbar(_path)) {
      uni.switchTab({
        url: path,
      })
    }
    else {
      uni.redirectTo({
        url: path,
      })
    }
  }
  catch (error) {
    console.log('登录失败', error)
  }
  finally {
    loading.value = false
  }
}

// 跳转到注册页
function goToRegister() {
  uni.navigateTo({
    url: '/pages/login/register',
  })
}

// 清空表单
function clearForm() {
  formData.username = ''
  formData.password = ''
}
</script>

<template>
  <view class="login-container">
    <!-- 顶部装饰 -->
    <view class="header-decoration">
      <view class="decoration-shape shape-1" />
      <view class="decoration-shape shape-2" />
    </view>

    <!-- 主体内容 -->
    <view class="login-content">
      <!-- Logo 和标题 -->
      <view class="logo-section">
        <view class="logo-wrapper">
          <wd-icon name="file-paste" size="80" color="#52c41a" />
        </view>
        <view class="app-title">
          蛐蛐本
        </view>
        <view class="app-subtitle">
          记录生活中的点点滴滴
        </view>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <view class="form-title">
          欢迎回来
        </view>

        <!-- 用户名输入 -->
        <view class="input-item">
          <wd-input
            v-model="formData.username"
            label="用户名"
            placeholder="请输入用户名"
            prefix-icon="user"
            clearable
            :border="false"
            class="custom-input"
          />
        </view>
        <!-- 密码输入 -->
        <view class="input-item">
          <wd-input
            v-model="formData.password"
            label="密码"
            placeholder="请输入密码"
            password
            prefix-icon="lock-on"
            show-password
            clearable
            :border="false"
            class="custom-input"
          />
        </view>

        <!-- 登录按钮 -->
        <view class="button-section">
          <wd-button
            type="success"
            size="large"
            :loading="loading"
            :disabled="loading"

            round block
            class="login-button"
            @click="doLogin"
          >
            {{ loading ? '登录中...' : '登录' }}
          </wd-button>
        </view>

        <!-- 分割线 -->
        <view class="divider-section">
          <view class="divider-line" />
          <text class="divider-text">或</text>
          <view class="divider-line" />
        </view>

        <!-- 注册链接 -->
        <view class="register-section">
          <text class="register-text">还没有账号？</text>
          <wd-button type="text" size="small" class="register-btn" @click="goToRegister">
            立即注册
          </wd-button>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="footer-decoration">
      <view class="wave" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9e8 0%, #c7edcc 100%);
  position: relative;
  overflow: hidden;
}

// 顶部装饰
.header-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 300rpx;
  height: 300rpx;

  .decoration-shape {
    position: absolute;
    background: rgba(82, 196, 26, 0.1);

    &.shape-1 {
      width: 120rpx;
      height: 120rpx;
      border-radius: 24rpx;
      top: 50rpx;
      right: 50rpx;
      transform: rotate(45deg);
      animation: float 6s ease-in-out infinite;
    }

    &.shape-2 {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      top: 100rpx;
      right: 180rpx;
      animation: float 4s ease-in-out infinite reverse;
    }
  }
}

// 主体内容
.login-content {
  padding: 120rpx 50rpx 50rpx;
  position: relative;
  z-index: 2;
}

// Logo 部分
.logo-section {
  text-align: center;
  margin-bottom: 80rpx;

  .logo-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 120rpx;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    margin-bottom: 30rpx;
    box-shadow: 0 8rpx 32rpx rgba(82, 196, 26, 0.2);
    animation: bounce 2s infinite;
  }

  .app-title {
    font-size: 52rpx;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 16rpx;
    letter-spacing: 2rpx;
  }

  .app-subtitle {
    font-size: 28rpx;
    color: #7f8c8d;
    font-weight: 300;
  }
}

// 登录表单
.login-form {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  padding: 60rpx 50rpx;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10rpx);
  border: 1px solid rgba(255, 255, 255, 0.2);

  .form-title {
    font-size: 44rpx;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 60rpx;
  }

  .input-item {
    margin-bottom: 32rpx;

    :deep(.wd-input) {
      background: #f8f9fa;
      border-radius: 16rpx;
      padding: 24rpx 20rpx;

      .wd-input__value {
        font-size: 30rpx;
        color: #2c3e50;
      }

      .wd-input__label {
        color: #5a6c7d;
        font-weight: 500;
        font-size: 28rpx;
      }

      .wd-input__placeholder {
        color: #a0a0a0;
        font-size: 28rpx;
      }

      .wd-input__prefix {
        color: #52c41a;
      }
    }
  }

  .button-section {
    margin: 50rpx 0 30rpx;

    :deep(.login-button) {
      height: 88rpx;
      background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
      border: none;
      font-size: 32rpx;
      font-weight: 600;
      letter-spacing: 2rpx;

      &:not(.wd-button--disabled):active {
        transform: translateY(2rpx);
      }
    }
  }

  .forgot-section {
    text-align: center;
    margin-bottom: 40rpx;

    :deep(.forgot-btn) {
      color: #52c41a;
      font-size: 26rpx;
    }
  }

  .divider-section {
    display: flex;
    align-items: center;
    margin: 40rpx 0;

    .divider-line {
      flex: 1;
      height: 1rpx;
      background: #e8ecf4;
    }

    .divider-text {
      padding: 0 20rpx;
      font-size: 24rpx;
      color: #95a5a6;
    }
  }

  .register-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;

    .register-text {
      color: #7f8c8d;
      font-size: 26rpx;
    }

    :deep(.register-btn) {
      color: #52c41a;
      font-size: 26rpx;
      font-weight: 600;
    }
  }
}

// 底部装饰
.footer-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rpx;
  overflow: hidden;

  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 80rpx;
    background: rgba(82, 196, 26, 0.1);
    border-radius: 50%;
    animation: wave 15s linear infinite;
  }
}

// 动画效果
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(45deg);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10rpx);
  }
  60% {
    transform: translateY(-5rpx);
  }
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
